<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 外面包裹的白色底部盒子 -->
      <el-card shadow="never">

        <!-- 使用24分栏 进行做哟排列布局 -->
        <el-row style="width: 100%">
          <el-col :span="14">
            <div class="grid-content bg-purple"></div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item :label="$t('table.Subjectname')" size="small">
                <!-- 输入框 -->
                <el-input v-model="form.name" style="width: 200px"></el-input>
                <el-button style="margin-left: 10px" @click="clearance">{{
                  $t("table.eliminate")
                }}</el-button>
                <el-button type="primary" @click="search">{{
                  $t("table.search")
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-col>

          <!-- Excel导出 -->
          <el-col :span="10" style="display: flex; justify-content: flex-end">
            <div class="grid-content bg-purple" style="margin-right: 10px">
              <el-button
                type="primary"
                icon="el-icon-copy-document"
                size="small"
                @click="excelExport"
                >{{ $t("table." + "Excel-Export") }}</el-button
              >
            </div>
            <div class="grid-content bg-purple">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="add"
                >{{ $t("table.AddSubject") }}</el-button
              >
            </div>
          </el-col>
        </el-row>

        <!-- 灰色显示条 -->
        <el-alert
          :title="'数据一共有 ' + counts + ' 条'"
          type="info"
          show-icon
          style="margin-bottom: 20px"
          closable:false
        ></el-alert>

        <!-- 数据表格  通过这个绑定数据进行table渲染的   只要把这个数据更新了就行  还是-->
        <!--  :row-style="{ height: '4px' }" -->
        <!-- style="width:1000%;" -->
        <el-table
          :data="tableData"
          stripe
          :cell-style="{ textAlign: 'center' }"
          size="medium "
          v-loading="isLoading"
          :header-cell-style="{ background: '#fafafa', textAlign: 'center' }"
        >
          <!-- type="index":element中的方法 序号 -->
          <!-- :index="indexMethod 中的方法 进行排序 -->
          <el-table-column
            prop="id"
            :label="$t('table.id')"
            width="80"
            type="index"
            :index="indexMethod"
          >
          </el-table-column>

          <el-table-column
            prop="subjectName"
            :label="$t('table.Subjectname')"
            width="150"
          >
          </el-table-column>

          <el-table-column prop="username" :label="$t('table.creator')">
          </el-table-column>

          <el-table-column
            prop="addDate"
            width="150"
            :label="$t('table.creatdate')"
          >
            <template v-slot="{ row }">
              {{ formateTime(row.addDate) }}
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.Foreground')"
            prop="isFrontDisplay"
          >
            <template v-slot="{ row }">
              <span>{{ row.isFrontDisplay === 1 ? "是" : "否" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.SecondaryDirectory')"
            prop="twoLevelDirectory"
          >
          </el-table-column>

          <el-table-column :label="$t('route.' + 'subjects-tags')" prop="tags">
          </el-table-column>

          <el-table-column :label="$t('table.questionsNumber')" prop="totals">
          </el-table-column>

          <el-table-column :label="$t('table.operation')" width="300%">
            <!-- default:默认插槽 -->
            <template #default="{ row }">
              <el-button
                type="text"
                size="medium"
                @click="classify(row.subjectName, row.id)"
                >学科分类</el-button
              >
              <el-button
                type="text"
                size="medium"
                @click="label(row.subjectName, row.id)"
                >学科标签</el-button
              >
              <el-button type="text" size="medium" @click="edit(row.id)"
                >修改</el-button
              >
              <el-button type="text" size="medium" @click="del(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <!-- current-page:当前页 -->
        <!-- page-sizes下拉选择页容量 -->
        <!-- page-size:当前页容量 -->
        <!-- size-change: 页容量发生变化时触发-->
        <!-- current-change :页码发生变化时候触发-->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pagesize"
            layout="->, prev, pager, next, sizes, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- moduleAdd这不是封装得组件吧 -->
      <!-- 1.下面定义一下 -->
      <!-- 2.传给子组件 -->
      <!-- 3.点击得时候让它显示 -->
      <moduleAdd
        :dialogFormVisible.sync="dialogFormVisible"
        @getList="list"
        :title.sync="fatherTitle"
        ref="moduleAdd"
      />
    </div>
    <!-- sync:修饰符 ，可以把修改的权限授权给子组件，让其在子组件进行操作 -->
  </div>
</template>

<!-- 怎么提交不上去 -->
<script>
// list：数据渲染接口
// remove：删除接口
// update：修改接口
// detail：详细
import { list, remove } from '@/api/hmmm/subjects'
import moduleAdd from '@/module-hmmm/components/subjects-add.vue'
import dayjs from 'dayjs'
import { handleDownload } from '@/utils/excelExport'

export default {
  components: {
    moduleAdd
  },
  data () {
    return {
      form: {
        name: ''
      },
      tableData: [], // 数据列表
      counts: 0, // 总数
      // 分页
      page: 1, // 当前页
      pagesize: 10, // 当前页容量
      isLoading: false, // 优化: 加载进度
      // 增加弹窗显示
      dialogFormVisible: false, // 控制moduleAdd显示||隐藏
      // 表单验证范畴
      // dialog标题
      fatherTitle: ''
    }
  },
  created () {
    // 需要先将数据进行二次封装，再进行调用
    this.list()
    // console.log(this.row)
    // this.update()
    // console.log(this.list)
    // console.log(this.tableData)
    // console.log(this.counts)
  },
  methods: {
    // 将获取过来的接口进行二次封装

    /** 1. 获取数据列表
     *
     */
    async list () {
      // 需要进行传参 如果不传 ,当你切换页码的时候,不知道你切换还是美誉切换
      const { data } = await list({ page: this.page, pagesize: this.pagesize })
      this.isLoading = true
      this.counts = data.counts
      this.tableData = data.items // 这个函数里面是通过这行代码渲染数据的   就是把请求回来的数据 给到tableDate  现在知道了
      // console.log(this.list())
      // console.log(this.counts)
      // 优化:加载条 需要先声明isLoading=false 在接口请求之前 为true  请求之后为false
      this.isLoading = false
    },
    // 清除表单
    clearance () {
      this.form.name = ''
    },

    // 2. 分页
    /** 当页容量发生变化时候触发
     *
     */
    handleSizeChange (val) {
      // console.log('也容量' + val)
      this.pagesize = val
      // 当页容量发生变化的时候,回到第一页
      this.page = 1
      this.list()
    },

    /** 页码发生变化时触发
     *
     */
    handleCurrentChange (val) {
      // console.log('页码' + val)
      // 页码发生变化的手,把页码复制给 page
      this.page = val
      // 将点击切换过后的页码赋值之后,然后重新请求一下数据
      this.list()
    },

    /** 切换页码,序号问题
     *
     * @param {*} index :当前行号   必须要return
     */
    indexMethod (index) {
      // index  :当前行号   必须要return
      // return (index - 1) * this.page + 1
      // 之前页的总条数 + 当前页的索引数
      return (this.page - 1) * this.pagesize + index + 1
    },

    // 3.增删改查功能
    /** 删除
     *步骤:
     1.给删除按钮绑定一个点击事件,然后通过作用域插槽来进行获取点击的哪行的id
     2.弹出提示框,询问时候要进行删除
     3.用户确定删除以后,封装接口,然后调用接口
     4.接口请求成功,重新渲染,并提示操作成功
     */
    del (id) {
      const data = { id }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // 点击遮罩的时候，不能退出
        closeOnClickModal: false,
        type: 'warning'
      })
        .then(async () => {
          await remove(data) // 调用接口
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.list() // 重新渲染数据
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    /** 添加
     *步骤：
     1.当点击添加的时候，首先进行兜底校验
     2.校验通过后，调用接口
     3.成功提示+关闭弹窗，+重新渲染数据
     */
    add () {
      this.dialogFormVisible = true
      // 新增全部都是在子组件里面完成的
      this.fatherTitle = '新增'
    },

    // 修改
    /**
     * 步骤：
     * 1.当点击编辑的时候，需要先请求回显接口，并且获取当前点击那行的id
     */
    async edit (id) {
      // console.log(id)
      this.fatherTitle = '修改'
      this.dialogFormVisible = true
      this.$refs.moduleAdd.shouFormDate(id)
    },

    // 搜索
    async search () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.form.name
      })
      // console.log(data)
      // this.name = data
      this.tableData = data.items // 拿到后又重新请求获取全部了   猜到是这个地方了
      // console.log(data)
    },

    // 修改时间
    /**
     *
     * @param {} item  修改时间，需要下载依赖  npm i dayjs
     */
    formateTime (item) {
      return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
    },

    // 页面切换
    /** 学科分类跳转
     * this.$router.push('/subjects/directorys')
     */
    classify (name, id) {
      // console.log(1)
      // console.log(name, id)
      this.$router.push({
        path: '/subjects/directorys',
        query: { name: `${name}`, id: `${id}` }
      })
    },
    // 学科标签页面跳转
    label (name, id) {
      this.$router.push({
        path: '/subjects/tags',
        query: { name: `${name}`, id: `${id}` }
      })
    },

    // excel导出
    async excelExport () {
      // 第一步：获取全部数据
      const { data } = await list({ page: 1, pagesize: 1000 })
      // console.log(data.items)
      // 第二步：定义导出表格表头
      const headersArr = [
        '序号',
        '学科名称',
        '创建者',
        '创建时间',
        '前台是否显示',
        '二级目录',
        '标签',
        '题目数量'
      ]
      // 第三步：定义需要替换的中英文
      const headersRelations = {
        序号: 'serialNumber',
        学科名称: 'subjectName',
        创建者: 'creator',
        创建时间: 'addDate',
        前台是否显示: 'isFrontDisplay',
        二级目录: 'twoLevelDirectory',
        标签: 'tags',
        题目数量: 'totals'
      }
      // 第四步:如果需要处理数据  定义一个方法
      // 有俩参数  value是需要处理的数据  englishKey是所有数据的属性名，是英文的
      const dealfn = (value, englishKey) => {
        if (['isFrontDisplay'].includes(englishKey)) {
          // 在内部的细节处理的方法  value是需要处理的数据  需要把处理好的数据 return出来
          const fn = (value) => {
            if (value === '1') {
              return '是'
            } else {
              return '否'
            }
          }
          // 处理完的数据重新赋值给value
          value = fn(value)
        }
        // 最后返回value
        return value
      }
      // 调用封装的excel导出的函数  5个参数  前3个必须,后两个可选
      handleDownload(
        data.items,
        headersArr,
        headersRelations,
        '学科目录',
        dealfn
      )
    }
  }
}
</script>

<style scoped>
.block {
  margin-top: 25px;
}
</style>
